<template>
  <div class="main">
    <van-nav-bar
      title="支付状态"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <van-tabs v-model="active">
      <van-tab title="已支付" class="header">
        <div class="kuang" v-for="item in tabledata" :key="item.id" :style="{display:item.paymentStatus == true ? 'bolck' :'none'}">
          <div class="zhong" >
            <p>
              支付状态：
              <span class="van-span">
                <van-icon name="success"/>
                已支付
              </span>
            </p>
          </div>
          <!-- 商品信息 -->
          <div class="xia">
            <img class="image" :src="item.goodsImg" alt="" />
            <div class="wenzi">
              <p>
                {{ item.goodsName }}<span>￥{{ item.goodsPrice }}</span>
              </p>
              <p>
                数量：<span>X{{ item.goodsNum }}</span>
              </p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="未支付" class="right"> 
           <div class="kuang" v-for="item in tabledata" :key="item.id" :style="{display:item.paymentStatus == false ? 'bolck' :'none'}">
          <div class="zhong">
            <p>
              支付状态：
              <span class="van-span" :style="{color:active == 1 ? 'red':'green'}">
                <van-icon name="success" />
                未支付
              </span>
            </p>
          </div>
          <!-- 商品信息 -->
          <div class="xia">
            <img class="image" :src="item.goodsImg" alt="" />
            <div class="wenzi">
              <p>
                {{ item.goodsName }}<span>￥{{ item.goodsPrice }}</span>
              </p>
              <p>
                数量：<span>X{{item.goodsNum}}</span>
              </p>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      active: 0,
      Id:0,
      tabledata: [
        {
          id: 1,
          dianmian: "淘宝旗舰店",
          src: "https://img01.yzcdn.cn/vant/apple-1.jpg",
          name: "双宝玄图",
          price: 405,
          num: 1,
        },
        {
          id: 2,
          dianmian: "淘宝旗舰店",
          src: "https://img01.yzcdn.cn/vant/apple-1.jpg",
          name: "双宝玄图",
          price: 405,
          num: 1,
        },
      ],
    };
  },
  created(){
    // this.Id = window.localStorage.getItem("id")
      // console.log(this.$route.query.data);
      this.tabledata = this.$route.query.data;
      console.log(this.tabledata);
      // this.getGoods()
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/jiesuan" });
    },
  },
};
</script>
<style scoped lang='less'>            
.header,.right{
  .kuang {
    margin: 10px;
    height: 120px;
    border: 1px solid rgb(219, 218, 218);
    border-radius: 15px ;
    .zhong {
      height: 25px;
      margin-top: 5px;
      p {
        padding: 0;
        margin: 0;
        margin-left: 15px;
        font-size: 16px;
        color: green;
        position: relative;
        .van-span {
          position: absolute;
          top: 0;
          right: 5px;
        }
      }
    }
    .xia {
      height: 80px;
      display: flex;
      position: relative;
      .image {
        width: 70px;
        height: 70px;
        margin-left: 15px;
        margin-top: 5px;
      }
      .wenzi {
        position: absolute;
        top: 0;
        right: 15px;
        p {
          padding: 0;
          font-size: 14px;
        }
      }
    }
  }
}
</style>